<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
	<link href="${ctx}resources/css/select/bootstrap-select.css" rel="stylesheet" type="text/css">
	<%@ include file="/WEB-INF/common/head.jsp"%>
</head>
<body class="${cookie.bodyClass.value}">
<div class="container body">
	<div class="main_container">
		<%@ include file="/WEB-INF/common/left.jsp"%>
		<%@ include file="/WEB-INF/common/top.jsp"%>
		<!-- page content -->
		<div class="right_col" role="main" id="main">
			<div class="x_panel">
				<div class="x_title">
					<h2>商户详情</h2>
					<div class="clearfix"></div>
				</div>
				<div class="x_content">
					<div class="modal-body">
						<form role="form" data-parsley-validate id="merchantForm" class="form-horizontal">
							<input type="hidden" id="merchantId" name="merchantId"  value="${merchant.merchantId}">
							<div class="form-group item">
								<label for="name" class="col-sm-3 control-label">商户头像:<font color="red">*</font>
								</label>
								<div class="col-sm-6">
									<input type="hidden" id="imageUrl" name="imageUrl" value="${merchant.imageUrl}" /> 
									<img src="${ctx}resources/images/zanwutupian.jpg" id="showImage" width="100px;" height="100px;">
									<button type="button" class="btn btn-primary btn-sm" style="display: block;width: 100px;margin-top: 10px;">上传图片</button>
									<input type="file" id="fileLogo" name="file" class="hideFile" onchange="uploadImage(this)" />
									<font color="red"><!-- 建议图片比例上传1:1的图片 -->
										建议上传200*200大小的图片，仅支持jpg，png等格式
									</font>
								</div>
							</div>
							<div class="form-group item">
								<label for="name" class="col-sm-3 control-label">商户名称:<font color="red">*</font>
								</label>
								<div class="col-sm-6">
									<input type="text" class="form-control" id="merchantName" name="merchantName" value="${merchant.merchantName}" 
									placeholder="商户名称" required='required' data-parsley-length="[0,40]">
								</div>
							</div>
							<div class="form-group item">
								<label for="name" class="col-sm-3 control-label">联系电话:<font color="red">*</font>
								</label>
								<div class="col-sm-6">
									<input type="text" class="form-control" id="contactPhone" name="contactPhone" value="${merchant.contactPhone}" 
									placeholder="联系电话" required='required' data-parsley-length="[0,40]" data-parsley-pattern="(0?(13|14|15|18)[0-9]{9}|(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14})">
								</div>
							</div>
							<div class="form-group item">
								<label for="name" class="col-sm-3 control-label">商户QQ:<font color="red">*</font>
								</label>
								<div class="col-sm-6">
									<input type="text" class="form-control" id="customerServiceQq" name="customerServiceQq" value="${merchant.customerServiceQq}"
									placeholder="商户QQ" required='required' data-parsley-length="[0,40]" data-parsley-pattern="[1-9][0-9]{4,14}">
								</div>
							</div>
							<div class="form-group item">
								<label for="name" class="col-sm-3 control-label">省:<font color="red">*</font>
								</label>
								<div class="col-sm-6">
									<select id="provinceId" name="provinceId" class="form-control"  required="required" >
										<option value="">请选择</option>
									</select>
								</div>
							</div>
							<div class="form-group item">
								<label for="name" class="col-sm-3 control-label">市:<font color="red">*</font>
								</label>
								<div class="col-sm-6">
									<select id="cityId" name="cityId" class="form-control" required="required">
										<option value="">请选择</option>
									</select>
								</div>
							</div>
							<div class="form-group item">
								<label for="name" class="col-sm-3 control-label">区:<font color="red">*</font>
								</label>
								<div class="col-sm-6">
									<select id="areaId" name="areaId" class="form-control" required="required">
										<option value="">请选择</option>
									</select>
								</div>
							</div>
							<div class="form-group item">
								<label for="name" class="col-sm-3 control-label">详细地址:<font color="red">*</font>
								</label>
								<div class="col-sm-6">
									<input type="text" class="form-control" id="receiverAddress" name="receiverAddress" value="${merchant.receiverAddress}"
									placeholder="详细地址" required='required' data-parsley-length="[0,100]">
								</div>
							</div>
						</form>
					</div>
					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="text-align:center">
						<button type="button" class="btn btn-dark btn-sm" onclick="back();">返回</button>
						<button type="button" class="btn btn-primary btn-sm" onclick="save();">保存</button>
					</div>
				</div>
			</div>
		</div>
		<!-- /page content -->
		<%@ include file="/WEB-INF/common/foot.jsp"%>
	</div>
</div>
<%@ include file="/WEB-INF/common/script.jsp"%>
<script type="text/javascript" src="${ctx}resources/js/ajaxfileupload.js"></script>
<script src="${ctx}resources/js/select/bootstrap-select.js"></script>
<script type="text/javascript">
    function back() {
        window.location = ctx + "admin/merchant/toMerchantPage";
    }
	function uploadImage(obj) {
		var fileId = $(obj).attr("id");
		/* 	swal({
				"title" : "",
				"text" : "正在处理……请稍后",
				"showConfirmButton" : false
			}); */
		$.ajaxFileUpload({
			url : ctx + "admin/upload/uploadImg?dir=merchant", //用于文件上传的服务器端请求地址
			secureuri : false, //是否需要安全协议，一般设置为false
			fileElementId : fileId, //文件上传域的ID
			dataType : 'json', //返回值类型 一般设置为json
			success : function(data, status) //服务器成功响应处理函数
			{
				data = $.parseJSON(data);
				if (data.status == 0) {
					$("#showImage").attr("src", data.data.src);
					$("#imageUrl").val(data.data.img);
					swal.close();
				} else {
					swal({
						title : "",
						text : data.msg,
						type : "error"
					});
				}
			},
			error : function(data, status, e)//服务器响应失败处理函数
			{
				swal({
					title : "",
					text : data.msg,
					type : "error"
				});
			}
		});
	}
	//查询省
	function initProvinces() {
		$.ajax({
			url : ctx + "admin/area/findProvinces",
			type : 'post',
			data : {},
			dataType : "json",
			async : false,
			success : function(data) {
				var contentHTML = "<option value=''>请选择</option>";
				$.each(data, function(i, item) {
					contentHTML += "<option value='"+item.id+"'>"
							+ item.province + "</option>";
				});
				$("#provinceId").html(contentHTML);
			}
		});
	}
	//查询市
	function initCities() {
		var provinceId = $("#provinceId").val();
		if (provinceId != "") {
			$.ajax({
				url : ctx + "admin/area/findCities",
				type : 'post',
				data : {
					provinceId : provinceId
				},
				dataType : "json",
				async : false,
				success : function(data) {
					var contentHTML = "<option value=''>请选择</option>";
					$.each(data, function(i, item) {
						contentHTML += "<option value='"+item.id+"'>"
								+ item.city + "</option>";
					});
					$("#cityId").html(contentHTML);
					$("#areaId").html("<option value=''>请选择</option>");
				}
			});
		} else {
			$("#cityId").html("<option value=''>请选择</option>");
			$("#areaId").html("<option value=''>请选择</option>");
		}
	}
	//查询区
	function initAreas() {
		var cityId = $("#cityId").val();
		if (cityId != "") {
			$.ajax({
				url : ctx + "admin/area/findAreas",
				type : 'post',
				data : {
					cityId : cityId
				},
				dataType : "json",
				async : false,
				success : function(data) {
					var contentHTML = "<option value=''>请选择</option>";
					$.each(data, function(i, item) {
						contentHTML += "<option value='"+item.id+"'>"
								+ item.area + "</option>";
					});
					$("#areaId").html(contentHTML);
				}
			});
		} else {
			$("#areaId").html("<option value=''>请选择</option>");
		}
	}
    $(function() {
    	//加载城市
		initProvinces();
		$('#provinceId').change(function() {
			initCities();
		});
		$('#cityId').change(function() {
			initAreas();
		});
		var merchantId = $("#merchantId").val();
		if (merchantId != "") {
			$("#showImage").attr("src",
					'${imgDomain}' + '/' + '${merchant.imageUrl}');
			$("#imageUrl").val('${merchant.imageUrl}');
			$("#provinceId").val('${merchant.provinceId}');
			$("#provinceId").change();
			$("#cityId").val('${merchant.cityId}');
			$("#cityId").change();
			$("#areaId").val('${merchant.areaId}');
		}
    });
    
    function save() {
		if (!$('#merchantForm').parsley().validate()) {
			return;
		}
		swal({
			"title" : "",
			"text" : "正在处理……请稍后",
			"showConfirmButton" : false
		});
		$.ajax({
			url : ctx + "admin/merchant/saveOrUpdate?time="
					+ (new Date()).getTime(),
			dataType : "json",
			data : $("#merchantForm").serialize(),
			success : function(result) {
				if (result.status == "0") {
					swal({
						title : '',
						text : "保存成功"
					}, function() {
						back();
					});
				} else {
					swal({
						title : '',
						text : result.msg,
						type : "error"
					});
				}
			}
		});
	}
</script>
</body>
</html>